<script setup lang="ts">
import {useRouter} from 'vue-router';
import {onMounted, ref} from "vue";
import request from '../plugins/request.js'
import {showSuccessToast} from "vant";
import {getCurrentUser} from "../service/user";

const router = useRouter()
const user = ref()

onMounted( async ()=>{
  // 页面刷新的时候进行调用  获取用户信息
  user.value = await getCurrentUser()
})

const toEdit = (editKey: string,editName:string, currentValue: string) => {
    router.push({
        name: "userEdit",
        query: {
            editKey,
            editName,
            currentValue
        }
    })
}
const logout = async () =>{
  // 跳转到登录页
  await router.replace('/user/login')
  // 退出登录接口
  const result = await request.post('/user/logout')
  const {code} = result;
  if (code === 200){
    showSuccessToast('退出登录成功')
  }
}

</script>
<template>
  <div v-if="user">
    <van-cell title="昵称" is-link :value="user.username" @click="toEdit('username','昵称',user.username)" />
    <van-cell title="账户" :value="user.userAccount" />
    <van-cell title="头像" is-link :value="user.avatarUrl" @click="toEdit('avatar','头像',user.avatarUrl)">
      <img style="height: 48px;" :src="user.avatarUrl" alt="头像"/>
    </van-cell>
    <van-cell title="性别" is-link :value="user.gender" @click="toEdit('gender','性别',user.gender)"/>
    <van-cell title="电话" is-link :value="user.phone" @click="toEdit('phone','电话',`${user.phone}`)"/>
    <van-cell title="邮箱" is-link :value="user.email" @click="toEdit('email','邮箱',user.email)"/>
    <van-cell title="星球编号" :value="user.plantCode" />
    <van-cell title="注册时间" :value="user.createTime" />
    <div id="logout" style="margin: 10px 10px">
      <van-button  block type="primary" @click="logout">退出登录</van-button>
    </div>

  </div>
  <div v-else>
    <van-empty description="暂无信息"/>
    <van-button block type="primary" @click="router.replace('/user/login')">登录</van-button>
  </div>






</template>

<style scoped></style>